/*******************************
          global
*******************************/
@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/ProximaNova-Light.otf");
}
@font-face {
  font-family: "Chinese";
  src: local('微软雅黑');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100;
    src: local('Raleway Thin'), local('Raleway-Thin'), url("./fonts/Raleway-100.woff") format('woff');
}
body {
    font-family: "proxima-nova", "Raleway", "Chinese", Consolas, "Arial", sans-serif;
    background-color: #f4f8fc;
    color: #5a6b77;
    padding: 0;
    margin: 0;
    /* -webkit-transition:background-color 0.3s ease; */
}
body.dark {background-color: #373b44;color: white;}

[draggable] {
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -webkit-user-drag: element;
}
/*******************************
          Scroller
*******************************/
*::-webkit-scrollbar{
    width: 8px;
    background: -webkit-linear-gradient(left,rgba(202, 202, 202, 0.07) 0%,rgba(229, 229, 229, 0.07) 100%);
    /*-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, .15) inset,0 1px 0 0 white;*/
    background-color: #E5E5E5;
}
*::-webkit-scrollbar:horizontal {
  height: 10px;
}
*::-webkit-scrollbar,*::-webkit-scrollbar-thumb {
    overflow: visible;
    border-radius: 4px;
    border: solid 1px #A6A6A6;
}
*::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(left,rgba(233, 233, 233, 0.05) 0%, rgba(221, 221, 221, 0.05) 100%);
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .05), inset 2px 2px 0px rgba(255, 255, 255, .5);
    background-color: #E9E9E9;
}
*::-webkit-scrollbar-button {
    height: 0;
    display: block;
    background-color: transparent;
}
/*******************************
          dark theme
*******************************/
.dark *::-webkit-scrollbar,.dark::-webkit-scrollbar {
    background: #202226;
}
.dark *::-webkit-scrollbar,.dark *::-webkit-scrollbar-thumb,.dark::-webkit-scrollbar,.dark::-webkit-scrollbar-thumb {
    border: solid 1px rgba(0,0,0,0.6);
}
.dark *::-webkit-scrollbar-thumb,.dark::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.65);
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .05);
}
.dark *::-webkit-scrollbar-corner{
  background: transparent;
}

/*******************************
          line
*******************************/
.line-holder {height: 1.4em;}
.line-mt {margin-top: 1.4em;}
.line-mb {margin-bottom: 1.4em;}

.text-center {text-align: center;}
/*******************************
          input
*******************************/
input:focus::-webkit-input-placeholder {
    -webkit-animation-name: slidein;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes slidein {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
/*******************************
          layout
*******************************/
.flb-box {display: -webkit-box;}
.flb-box-im {display: -webkit-box!important;}
.flb-vertical {-webkit-box-orient: vertical;}
.flb-center {-webkit-box-align: center;}
    .flb-p1 {-webkit-box-flex:1;}

/*******************************
          Virtual Format
*******************************/
.d-n {display: none;}
.hidden {display: none!important;}
.pos-center {position: relative;margin: auto;}
.block-center {position: absolute;margin: auto;top:0;bottom: 0;left: 0;right: 0}


/*******************************
          animation
*******************************/
@-webkit-keyframes rotating {
  0% {-webkit-transform: rotate(0deg);}
  /*50% {-webkit-transform: rotate(180deg);}*/
  100% {-webkit-transform: rotate(360deg);}
}

/*******************************
          UI Overwrite
*******************************/
/*size*/
.ui.button.dinky {padding: .3em .4em;font-size: 80%;}

/*input*/
.ui.input.round input {border-radius: 2em;}
.ui.input.blue input[type=text]:focus, .ui.form input[type=text]:focus,.ui.form input[type=password]:focus {box-shadow: rgba(82,152,252,0.4) 0 0 4px 0;
    border-color: #5298fc;color: #5298fc;border-radius: 5px;}


/*Custom Blue*/
.ui.csblue.button, .ui.csblue.buttons .button {background-image: -webkit-linear-gradient(#60b0fc,#4786fb);
color: white;}
.ui.csblue.button:hover, .ui.csblue.buttons .button:hover {background-image: linear-gradient(#71b9fc,#4987fb);}

/*Pure*/
.ui.pure.button, .ui.pure.buttons .button {font-weight: lighter;border-color: #b0b8bf;border-radius: 0;
  -webkit-box-shadow: none;border: 1px solid #b0b8bf;box-sizing:border-box;border-radius: 5px;
  background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fdfdfe),color-stop(100%,#d3dfe7))}
.ui.pure.buttons .button {
  border-left: 0;border-radius: 0;
}
.ui.pure.button:first-child, .ui.pure.buttons .button:first-child { border-left: 1px solid #b0b8bf;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;}
.ui.pure.button:last-child, .ui.pure.button:last-child, .ui.pure.buttons .button:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;}
.ui.pure.button:hover, .ui.pure.buttons .button:hover {
  text-shadow: none;border-color: #5298fc;
  color: white;background: linear-gradient(#60b0fc,#4786fb);
}


/*Lighter Blue*/
.ui.lhblue.button, .ui.lhblue.buttons .button {-webkit-box-shadow: none;background:transparent; border: 1px solid #5298fc;
  box-sizing:border-box;color: #5298fc;font-weight: lighter;}
.ui.lhblue.button:hover, .ui.lhblue.buttons .button:hover {background: #5298fc;color: white;text-shadow: none;}

/*dimmer*/
.ui.dimmer.gradient {background-image: radial-gradient(closest-corner circle,rgba(170,170,170,0.4),rgba(0,0,0,0.8));
  background-color: transparent;}
.ui.dimmer.fixed {position: fixed;}

/*dropdown*/
.ui.selection.dropdown.blue {background-image: linear-gradient(#60b0fc,#4786fb);color: white;
border: 1px solid #3491ce;box-shadow: rgba(255,255,255,0.2) 0 1px 0 0 inset;}


/*******************************
          dark theme
*******************************/
.dark .ui.pure.button, .dark .ui.pure.buttons .button {font-weight: lighter;border-radius: 0;
  -webkit-box-shadow: none; /*rgba(255,255,255,0.15) 0 1px 0 0 inset*/border: 1px solid black;box-sizing:border-box;border-radius: 5px;
  background-image: -webkit-linear-gradient(top,#3f424b 0,#1c1e22 100%);}
.dark .ui.pure.buttons .button {
  border-left: 0;border-radius: 0;
}
.dark .ui.pure.button:first-child, .dark .ui.pure.buttons .button:first-child { border-left: 1px solid black;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;}
.dark .ui.pure.button:last-child, .dark .ui.pure.button:last-child, .dark .ui.pure.buttons .button:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;}
.dark .ui.pure.button:hover, .dark .ui.pure.buttons .button:hover {
  text-shadow: none;border-color: black;
  color: white;background: linear-gradient(#60b0fc,#4786fb);
}


.dark .ui.input input {background-color: rgba(70, 70, 73, 1);box-shadow: inset 0 0px 6px 2px rgba(0,0,0,.8);
  color: rgba(255,255,255,.5)}
.dark .ui.input.blue input[type=text]:focus, .dark  .ui.form input[type=text]:focus, .dark .ui.form input[type=password]:focus {
  box-shadow: rgba(18, 19, 18, 1) 0 0 16px 1px, inset 0 0 12px 3px rgba(12, 12, 12, 1);border-color: black;color: #CFD3DA;}

.dark .ui.dropdown .menu {background-color: #202226;}
.dark .ui.dropdown .menu .item {color: rgba(255,255,255,0.8)}
.dark .ui.dropdown .menu .item:hover {background-color: rgba(255,255,255,.1)}

/*menu*/
.dark .ui.menu {background-color: #333;box-shadow: none;}
.dark .ui.menu .item,.dark .ui.menu .item>a {color: #FFF;}
.dark .ui.menu .active.item {box-shadow: none!important;background-color: rgba(255,255,255,.2);}
.dark .ui.menu a.item:hover, .dark .ui.link.menu .item:hover {background-color: rgba(255,255,255,.1);}

/*nav*/
.dark .ui.secondary.menu {background-color: transparent;}
.dark .ui.secondary.pointing.menu>.item.active, .dark .ui.secondary.pointing.menu>.menu>.item.active {
  border-color: rgba(255,255,255,.8);color: #fff;}
.dark .ui.secondary.inverted.pointing.menu {border-bottom: 0;}
.dark .ui.secondary.pointing.menu>.item {color: rgba(255,255,255,.7);}

/*dimmer*/
.dark .ui.inverted.dimmer {background-color: rgba(0,0,0,.85);}
.dark .ui.inverted.dimmer .ui.loader {background-image: url(/napi-ui/0.0.1/images/loader-medium-inverted.gif);}
.dark .ui.inverted.dimmer .ui.text.loader {color: rgba(255,255,255,.8)}

/*dropdown*/
.dark .ui.selection.dropdown .menu {box-shadow: 0 1px 0 1px #202226;}


/*******************************
          Custom UI
*******************************/
.cs.head {background-image: url(./head.png);background-size: 400px 100px;}
.dark .cs.head {background-image: url(./head-dark.png);background-size: 100%;}

/*******************************
          Business
*******************************/
.page {position: absolute!important;height: 100%;width: 100%;top: 0;left: 0}
